﻿<%@ Page Title="" Language="C#" MasterPageFile="~/master/m.master" %>

<script runat="server">

</script>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link href="../assets/css/plugins/jsTree/style.min.css" rel="stylesheet" />
    <link href="../assets/css/plugins/iCheck/customsmall.css" rel="stylesheet" />
    <link href="../assets/css/plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" />
    <style>
        .system-box .right-side{width: 100%;}
        .system-box .right-content-box{overflow: hidden;}
        .mainContent { height: 100%;background-color: #ffffff; min-width: 650px; }
        .mainContent .part{height: 100%; display: inline-block; background-color: #ffffff; vertical-align: top; border: 1px solid #dddddd;}
        .mainContent .part .title{border-bottom: 1px solid #dddddd; height: 30px; line-height: 30px; padding-left: 5px;    background-color: #eee;}
        .leftPart { width: calc(100% - 310px);  min-width: 320px;overflow: auto;}
        /*.rightPart{ width: 300px; overflow: auto;}*/
        .MessagePart{ width: 305px;overflow: auto;}
        .rightPart .titleText { height: 30px; line-height: 30px; display: inline-block;  }
        .searchbox{width: 180px; display: inline-block; float: right;}
        .btn-filter-users { -ms-border-radius: 0px; border-radius: 0px; }

        table { table-layout: fixed; }
        td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .dropdownColor { color: #000000 !important; background-color: #ffffff !important; border-color: #ccc !important; }
        .form-horizontal { margin-top: 10px; }
        #MessageList tr.check, .table-select tbody tr.check td:first-child { border-left: 4px solid #7acf89; }
        #MessageList tr.check td, .table-select tbody tr.check td { background: #dff0d8; color: #222121; }
        .leftPart .form-horizontal .form-group { margin-right: 0px; }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="main" runat="Server">
    <div class="system-box">
        <div class="right-side">
            <div class="btns-container"></div>
            <div class="right-content-box">
                <%--<div class="header-tips">企业微信用户报表授权</div>--%>
                <div class="mainContent">
                    <div class="MessagePart part">
                        <div class="title">
                            <div  class="titleText">
                                消息模板列表
                            </div>
                        </div>
                        <div id="">
                            <table class="footable table table-stripped table-list">
                                <thead>
                                <tr>
                                    <th style="width: 35px;"> </th>
                                    <th>消息名称</th>
                                    <th style="width: 120px;">消息类型</th>
                 
                                </tr>
                                </thead>
                                <tbody id="MessageList"></tbody>
                            </table>
                        </div>
                    </div>
                    <div class="leftPart part">
                        <div class="title">
                            消息模板内容
                        </div>
                        <div>
                     
                          <form class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="msgTemplateName">模板名称</label>
                                    <div class="col-sm-9">
                                        <input class="form-control" type="text" id="msgTemplateName" placeholder="">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="msgTemplateType">消息类型</label>
                                    <div class="col-sm-9">
                                        <select id="msgTemplateType" class="selectpicker" title="选择消息类型" data-style="dropdownColor" data-width="100%">
                                            <option value="TextCardMsg" selected="selected">文本卡片类型</option>
                                            <option value="TextMsg">文本类型</option>
                                            <option value="NewsMsg">图文类型</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="msgTemplateTitle">模板标题</label>
                                    <div class="col-sm-9">
                                        <input class="form-control" type="text" id="msgTemplateTitle" placeholder="">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="msgTemplateContent">模板内容</label>
                                    <div class="col-sm-9">
                                        <textarea class="form-control" rows="4" id="msgTemplateContent" placeholder=""></textarea>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="msgTemplateLink">模板超链接</label>
                                    <div class="col-sm-9">
                                        <input class="form-control" type="text" id="msgTemplateLink" placeholder="">
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="msgTemplateBtnText">超链接文字</label>
                                    <div class="col-sm-9">
                                        <input class="form-control" type="text" id="msgTemplateBtnText" placeholder="">
                                    </div>
                                </div>
                              
                              <div class="form-group templatePicUrl" style="display: none;">
                                  <label class="col-sm-2 control-label" for="msgTemplatePicUrl">图片地址</label>
                                  <div class="col-sm-9">
                                      <input class="form-control" type="text" id="msgTemplatePicUrl" placeholder="">
                                  </div>
                              </div>
                            </form>

                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="footer" runat="Server">
    <script src="../assets/js/plugins/iCheck/icheck.min.js"></script>
    <script src="../assets/js/plugins/iCheck/icheckAll.js"></script>
    <script src="../assets/js/page/rScroll.js"></script>
    <script src="../assets/js/page/pageControl.js"></script>
    <%--<script src="../assets/js/page/tableControl.js"></script>--%>
    <script src="../assets/js/plugins/jsTree/jstree.min.js"></script>
    <script src="../assets/js/plugins/bootstrap-select/bootstrap-select.min.js"></script>
    <script src="../assets/js/plugins/bootstrap-select/i18n/defaults-zh_CN.min.js"></script>


    <script type="text/html" id="tpl-msg-item">
        {{# for(var i = 0, len = d.length; i < len; i++){ }}
        <tr {{# if(i%2 == 0){ }} class="gradeX footable-even"
            {{# }else{ }} class="gradeX footable-odd" {{# } }}>
            <td class="Id" style="display: none;">{{d[i].Id}}</td>
            <td><input type="radio"  name="msg"  class="checkPlan" data-index="{{i}}" /></td>
            <td class="Name">{{d[i].Name}}</td>
            <td class="TemplateCode">{{d[i].TemplateCode}}</td>
        </tr>
        {{# } }}
    </script>
    <script>

        $(document).ready(function () {
            //layer.msg('玩命加载中……', { icon: 16, shade: 0.01, time: 0, maxWidth: 200 });

            //模块ID
            var ModuleID = Y.getUrlParam("ModuleID");

            //获取按钮
            commonUtil.loadBtnList(ModuleID, function () {
                rScroll();
            });

            //自动高 DOCUMENT高减按钮栏+其它
            //$(".chooseArea .leftArea1").height($(document).height() - (35 + 145));

            var errorIfNull = function(val, msg) {
                var tmp = val || "";
                if (tmp === "") {
                    swal(msg, '', 'error');
                    return true;
                }
                return false;
            }


            var resetAllInput = function () {
                $('#msgTemplateName').val("");
                $('#msgTemplateType').selectpicker("val", "xxx");
                $('#msgTemplateTitle').val("");
                $('#msgTemplateContent').val("");
                $('#msgTemplateLink').val("");
                $('#msgTemplateBtnText').val("");
                $('#msgTemplatePicUrl').val("");
            };

            var msgTemplateTypeChanged = function () {
                var msgType = $('#msgTemplateType').selectpicker('val');
                console.log(msgType);
                if (msgType === "NewsMsg") {
                    $('.templatePicUrl').show();
                } else {
                    $('.templatePicUrl').hide();
                }
            }

            //获取列表
            var loadMessageList = function () {
                pageControl.init('WxMsgTemplate', 'GetAutoSendMsgTemplateList', {
                    needLayer: true,
                    alwaysCallBack: function () {
                        $('#MessageList').empty();
                    }
                }, function (result) {
                    var tBody = [];
                    if (!Y.checkNull(result)) {
                        if (result.data.length == 0) {
                            Y.NoData(body, 5);
                            return false;
                        }
                        var pl = document.getElementById('tpl-msg-item').innerHTML;
                        laytpl(pl).render(result.data, function (html) {
                            document.getElementById('MessageList').innerHTML = html;

                            //$(".footable").icheckAll({
                            //    checkObj: ".checkPlan", //表格下面的选择控件对象 选择器
                            //    checkAllObj: "#checkAllPlan", //全选 选择器
                            //    clickoutBoxCheck: false, //点击行 不选中
                            //    checkboxMargin: "4px 0 0 0 " //上右下左
                            //});


                            $(".checkPlan").iCheck({
                                checkboxClass: "icheckbox_square-green",
                                radioClass: "iradio_square-green"
                            });

                            $('.checkPlan').on('ifChecked', function (event) {
                                $('.footable tr').removeClass('check');
                                $(this).parents('tr').addClass('check');
                            });

                            resetAllInput();
                        });
                        rScroll();
                    }
                });
            }


            //选中记录
            $('#MessageList').on('click', 'tr', function () {
                if ($(this).hasClass('check')) {
                    $('#MessageList tr').removeClass('check');
                    $('#MessageList tr .checkPlan').iCheck('uncheck');
                } else {
                    $('#MessageList tr').removeClass('check');
                    $(this).addClass('check');

                    $('#MessageList tr .checkPlan').iCheck('uncheck');
                    $(this).find('.checkPlan').iCheck('check'); 


                    //getdetail
                    var id = $(this).find('.Id').text();
                    Y.API2('WxMsgTemplate', 'GetMsgTemplate', { Id: id }, function (data) {
                        console.log(data)
                        if (data.Success == false) {
                            swal(data.Message, '', 'error');
                        } else {
                            $('.leftPart #msgTemplateName').val(data.Name);
                            //$('.leftPart #msgTemplateType').val(data.TemplateCode);
                            $('.leftPart #msgTemplateType').selectpicker('val', data.TemplateCode);
                            $('.leftPart #msgTemplateTitle').val(data.Title);
                            $('.leftPart #msgTemplateContent').val(data.Description);
                            $('.leftPart #msgTemplateLink').val(data.Url);
                            $('.leftPart #msgTemplateBtnText').val(data.Btntxt);
                            $('.leftPart #msgTemplatePicUrl').val(data.PicUrl);

                            msgTemplateTypeChanged();
                        }
                    });
                }

                //
            });

            //提交
            $(document).on("click", "#btn-save", function () {

                var tr = $('#MessageList .checkPlan:checked').parents('tr');
                var templiteId = $(tr).find('.Id').text() || 0;

                var action = templiteId === 0 ? "AddMsgTemplate" : "UpdateMsgTemplate";
                var msg = templiteId === 0 ? "添加成功" : "修改成功";

                var obj = {};
                obj.Id = templiteId;
                obj.Name = $('#msgTemplateName').val();
                obj.TemplateCode = $('#msgTemplateType').val();
                obj.Title = $('#msgTemplateTitle').val();
                obj.Description = $('#msgTemplateContent').val();
                obj.Url = $('#msgTemplateLink').val();
                obj.Btntxt = $('#msgTemplateBtnText').val();
                obj.PicUrl = $('#msgTemplatePicUrl').val();

                if (errorIfNull(obj.Name, "名称不能为空") ||
                    errorIfNull(obj.TemplateCode, "请选择消息类型") ||
                    errorIfNull(obj.Title, "标题不能为空") ||
                    errorIfNull(obj.Description , "内容不能为空") ||
                    errorIfNull(obj.Url, "超链接不能为空") ||
                    errorIfNull(obj.Btntxt, "超链接文字不能为空")) {
                    return false;
                }

                var msgType = $('#msgTemplateType').selectpicker('val');
                console.log(msgType);
                if (msgType === "NewsMsg") {
                    if (errorIfNull(obj.PicUrl, "图文消息的图片Url不能为空")) {
                        return false;
                    }
                } else {
                    obj.PicUrl = "#";
                }



                Y.API2('WxMsgTemplate', action, obj, function (data) {
                    if (data.Success == false) {
                        swal(data.Message, '', 'error');
                    } else {
                        swal(msg, '', 'success');
                        resetAllInput();
                        loadMessageList();
                    }
                });
            });


            $(document).on("click", "#addBtn", function() {
                resetAllInput();

                $('#MessageList tr').removeClass('check');
                $('#MessageList tr .checkPlan').iCheck('uncheck');
            });

            $(document).on("click", "#btn-search", function () {
                loadMessageList();
            });

            $(document).on("click", "#deleteBtn", function () {
          
                var tr = $('#MessageList .checkPlan:checked').parents('tr');
                var templiteId = $(tr).find('.Id').text() || 0;

                if (templiteId === 0) {
                    swal("请选择要删除的消息模板", '', 'error');
                    return false;
                }

                swal({
                    title: "您确定要删除这条记录吗",
                    text: "删除后将无法恢复，请谨慎操作！",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "删除",
                    cancelButtonText: "取消",
                    closeOnConfirm: false
                }, function () {
                    Y.API2('WxMsgTemplate', "RemoveMsgTemplate", { Id: templiteId }, function (data) {
                        if (data.Success == false) {
                            swal(data.Message, '', 'error');
                        } else {
                            swal("删除成功", '', 'success');
                            loadMessageList();
                        }
                    });
                });
            });

            $('#msgTemplateType').on('changed.bs.select', function (e) {
                msgTemplateTypeChanged();
            });

            //默认加载消息模板
            loadMessageList();
        })
    </script>
</asp:Content>

